<template>
  <div class="index">
    <el-container>
      <el-header class="df ai-c jc-sb">
        <h3 class="df ai-c">网吧后台超级管理员登录平台</h3>
        <div class="user df ai-c">
          <div style="cursor: pointer;" @click="refresh">刷新</div>
          <el-menu class="el-menu-demo" mode="horizontal" :ellipsis="false" background-color="#333333" text-color="#fff" active-text-color="#ffd04b">
            <el-sub-menu index="2">
              <template #title>

                <h4>{{ userInfo.username }}</h4>
                <img src="../../assets/user.webp" alt="" style="border-radius: 50%;width:35px;height: 35px;margin: 0 8px;" @click="visible=true">

              </template>
              <el-menu-item index="2-2" @click="edit_pass">修改密码</el-menu-item>
              <el-menu-item index="2-1" @click="loguOut">退出登录</el-menu-item>

            </el-sub-menu>
          </el-menu>

        </div>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <HeaderMenu :menuItem="menuItem" :activeIndex="'1'"></HeaderMenu>
        </el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>

    <!--修改密码弹框 -->
    <el-dialog v-model="dialogVisible" title="修改密码" width="30%">
      <el-form :model="form" label-width="80px" :rules="rules" style="padding-right: 15px;">
        <el-form-item label="原密码" prop="old_password">
          <el-input type="password" v-model="form.old_password" placeholder="请输入原密码" />
        </el-form-item>
        <el-form-item label="新密码" prop="new_password">
          <el-input type="password" v-model="form.new_password" placeholder="请输入新密码" />
        </el-form-item>
        <el-form-item label="确认密码" prop="enter_password">
          <el-input type="password" v-model="form.enter_password" placeholder="请再次输入新密码" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="enter_pass">
            确认
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import HeaderMenu from '../components/HeaderMenu.vue'
import { useCounterStore } from '../../current/index'
import { storeToRefs } from 'pinia' // cnpm i pinia --save  2.1.3
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import http from '../../http'
const store = useCounterStore()
const { userInfo } = storeToRefs(store) //  数据
const router = useRouter()
const menuItem = ref<{ name: string; id: string; icon: string; path: string }[]>([
  {
    name: '首页',
    id: '1',
    icon: '',
    path: '/home'
  },
  {
    name: '下级代理',
    id: '2',
    icon: '',
    path: '/juniorAgent'
  },
  {
    name: '网吧管理',
    id: '3',
    icon: '',
    path: '/bar'
  },
  {
    name: '卡密管理',
    id: '4',
    icon: '',
    path: '/codePass'
  },
  {
    name: '日志管理',
    id: '5',
    icon: '',
    path: '/log'
  },
  {
    name: '商品码',
    id: '6',
    icon: '',
    path: '/shopCode'
  },
  {
    name: '官网模块',
    id: '7',
    icon: '',
    path: '/website'
  }
])

// 刷新
const refresh = ()=>{
  window.location.reload()
}

const visible = ref(false)
const loguOut = () => {
  localStorage.clear()
  router.push('/login')
}
const dialogVisible = ref(false)
const form = ref({
  old_password: '',
  new_password: '',
  enter_password: ''
})
const edit_pass = () => {
  dialogVisible.value = true
}
const enter_pass = async () => {
  if (form.value.old_password == '') {
    ElMessage.error('旧密码不能为空')
    return false
  }
  if (form.value.new_password == '' || form.value.enter_password == '') {
    ElMessage.error('新密码不能为空')
    return false
  }

  if (form.value.new_password !== form.value.enter_password) {
    ElMessage.error('两次输入的密码不正确')
    return false
  }

  const res = await http.corsApi('/', 'post', {
    packID: '123456',
    packageType: 'adminSql',
    packageContent: {
      AgentUserName: userInfo.value.username,
      AgentUserPassword: userInfo.value.password,
      sql: `UPDATE agentuser SET AgentUserPassword = '${form.value.enter_password}' WHERE AgentUserName = '${userInfo.value.username}'`,
      dbName: 'userglobal'
    }
  })

  if (res.packageContent.packageStatus == 0) {
    ElMessage.success('修改成功  请重新登录')
    localStorage.clear() 
    router.push('/login')
  }else{
    ElMessage.error('修改失败'+ res.packageContent.packageMsg)
  }
 
  console.log(res)

  dialogVisible.value = false
}

const validatePass = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请再次输入新密码'))
  } else {
    if (form.value.new_password !== form.value.enter_password) {
      callback(new Error('两次密码不一样'))
    } else {
      callback()
    }
  }
}

const rules = reactive({
  old_password: [{ required: true, message: '请输入原密码', trigger: 'blur' }],
  new_password: [{ required: true, message: '请输入新密码', trigger: 'blur' }],
  enter_password: [{ required: true, validator: validatePass, trigger: 'blur' }]
})
</script> 


<style scoped lang="scss">
// .index{
//   height: 100vh;
// }
.el-main {
  height: calc(100vh - 60px);
}
.el-header {
  background-color: #333;
  color: #fff;
  .el-menu {
    color: #fff;
    border-bottom: 0 none;
  }
}
.el-sub-menu__title {
  border-bottom: 0 none;
}
:deep(.el-menu--horizontal > .el-sub-menu.is-active .el-sub-menu__title) {
  border-bottom: 0 none;
}
:deep(.el-menu--horizontal > .el-sub-menu.is-active .el-sub-menu__title) {
  color: #fff;
}
</style>